iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0
DevOps

菜逼八用Github Actions系列 第 23

Day 23 - 例子 - 把檔案上傳到Github Pages

  • 分享至 

  • xImage
  •  

目錄

摘要

在上一篇我們學到什麼是並發性,以及如何幫workflow設並發性以提升執行效率

這篇我們會來會來寫一個根據tag、分支來deploy到Github Pages的workflow

選擇適合的自動發版方式

我們知道gitflow有好多種,大致上可以分為單release分支、多release分支兩種

不過這邊不談怎麼選擇適合自己團隊的flow,只會說以下這四種flow的非dev環境發版時機

之所以不說dev環境的自動發版,是因為在每次PR merge到dev分支就會自動跑CI、CD

單線

main和dev分開

不分alpha、beta、prod
發版的tag通通打在main上,且main上所有的commit都具有tag的

main和dev一條

不分alpha、beta、prod
發版的tag通通打在main上,但main上只有部分commit具有tag

這兩種情況,都是當有新tag時自動發alpha,beta、prod則是手動觸發deploy的workflow,或者如果發版規律的話可以使用cronJob設定自動發版時間

多線

三條環境常駐

alpha、beta、prod各一條release分支
tag都打在alpha分支上,或者每個分支上都有帶有版號、環境的tag(e.g.:1.0.0-alpha、1.0.0-beta)
當進到下一個環境時,從上一個環境的分支(發PR)merge到下一個環境的分支

當merge到環境分支時自動發版

版號分支

各個版號各一條alpha、beta共用的release分支
tag都打在main上
當版本上prod時發PR merge回main,並把分支刪掉

當merge到release分支時自動發alpha,beta則是手動觸發deploy的workflow,prod則是merge回main時自動發版

根據tag自動發版步驟

前置作業

  1. 準備一個有靜態網站內容的repo

進行repo設定

先來設定github-pages

https://ithelp.ithome.com.tw/upload/images/20240919/20135568dqz9XoqeJT.png

完成github-pages的設定後系統會幫你建立一個叫github-pages的環境,如果在沒先完成這步的話,environment的設定頁只看到"There are no environments for this repository"

這個環境預設會有protection rule限制只能從default branch(通常是main或master)發版,所以需要去修改

https://ithelp.ithome.com.tw/upload/images/20240919/20135568PyjepHV7bG.png
https://ithelp.ithome.com.tw/upload/images/20240919/201355683fBdH1EY6a.png

要用tag來發版,rule要選tag,反之則選branch

撰寫workflow

在.github/workflows下建立yml檔

name: Deploy to github page

on:
  push:
    tags:        
      - 'trial@\d+.\d+.\d+'
  workflow_dispatch:
    inputs:
      envName:
        default: alpha

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # build完後得到的資料夾,或者裝html、js的資料夾
          path: ./dist

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      # 預設使用github-pages,但可以自己建立其他environment
      name: github-pages-${{ inputs.envName }}
      # 注意,每個repo都只會有一個github pages網址,所以這只是一個示意,並不會因此根據envName多產生幾個網址
      url: https://<使用者名>.github.io/<repo名>-${{git.envName}}
    permissions:
      pages: write
      id-token: write
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

workflow推上main後,在想要發版的commit點打版號tag

https://ithelp.ithome.com.tw/upload/images/20240919/20135568Y6FUf0CkrG.png

根據分支自動發版步驟

前置作業

  1. 準備一個有靜態網站內容的repo
  2. 幫release分支設置rule,避免有人用非PR的方式merge到該分支

https://ithelp.ithome.com.tw/upload/images/20240921/20135568dzXFOLjAq1.png

撰寫workflow

name: Deploy to github page

on:
  push:
    branches:        
      - alpha
      - beta
      # default branch,或者是用來prod發版的分支
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # build完後得到的資料夾,或者裝html、js的資料夾
          path: ./dist

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      # 根據分支名決定使用哪個github-pages
      name: github-pages-${{git.ref_name }}
      # 注意,每個repo都只會有一個github pages網址,所以這只是一個示意,並不會因此根據github.ref_name 多產生幾個網址
      url: https://<你的帳號>.github.io/<你的repo名>-${{git.ref_name }}
    permissions:
      pages: write
      id-token: write
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

上一篇
Day 22 - concurrency & 提升效能
下一篇
Day 24 - 例子 - 發版後自動更新Jira release note狀態
系列文
菜逼八用Github Actions30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言